<template>
	<view class="out-box">
		<!-- 斜线 -->
		<view class="oblique-bar"></view>
		<view class="oblique-bar-two"></view>
		<!-- 标题栏 -->
		<view class="titleBar">
			<view class="title">
				账单详情
			</view>
			<view class="backBtn" @click="back">
				<image src="../../static/back.svg"></image>
			</view>
		</view>
		<!-- 账单卡 -->
		<view class="account-card">
			<view class="card">
				<view class="accountInfo">
					<!-- 类型图标 -->
					<view class="typeIcon">
						<image :src="judgeIcon(state.accountInfo)"></image>
						<text>{{state.accountInfo.type}}</text>
					</view>
					<!-- 账单详情 -->
					<view class="account-detail">
						<view class="detailItem" v-for="item in state.showData" :key="item">
							<view class="typeTitle">
								{{item[0]}}
							</view>
							<view class="" :class="item[0]==='金额'?`${state.accountInfo.billType===1?'pay':'expense'}`:''">
								{{item[0]==='金额'?`${state.accountInfo.billType===1?'-':''}`:''}}{{item[1]}}
							</view>
						</view>
						<!-- 备注 -->
						<view class="remark">
							{{state.accountInfo.remark}}
						</view>
					</view>
					<!-- 删除编辑按钮 -->
					<view class="button">
						<!-- 删除按钮 -->
						<view class="delete" @click="deleteInfo">
							删除
						</view>
						<!-- 编辑按钮 -->
						<view class="change" @click="changeInfo">
							编辑
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="state.modelShow" showCancelButton @cancel="closeModel" @confirm="deleteAdd" :content='state.modelContent'></u-modal>
	</view>
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app';
	import { reactive } from "vue";
	const state = reactive({
		accountInfo:{},
		showData:[],
		token:'',
		typeHash:{
			"百货": "departmentStore",
			"彩票": "lottery",
			"餐厅消费": "restaurantConsumption",
			"餐饮":"repast",
			"宠物": "pet",
			"服饰": "costume",
			"副食": "non-stapleFood",
			"工资": "salary",
			"工作":"work",
			"还款":"repayment",
			"红包": "redPacket",
			"家庭": "family",
			"交通": "traffic",
			"借出":"lend",
			"借入": "borrow",
			"捐赠": "donate",
			"快递费": "expressFee",
			"礼金": "cashGift",
			"礼品":"present",
			"理财": "moneyManagement",
			"零食": "snacks",
			"旅行": "travel",
			"美容": "Beauty",
			"年终奖":"yearEndBonus",
			"其他": "else",
			"汽车": "automobile",
			"日用": "ofEverydayUse",
			"社交": "socialContact",
			"食堂消费":"CanteenConsumption",
			"收款": "receipt",
			"书籍": "books",
			"蔬菜": "vegetable",
			"数码": "numericalCode",
			"水果":"fruits",
			"通讯": "communication",
			"维修": "maintain",
			"洗漱用品": "toiletry",
			"休闲": "leisure",
			"学习":"study",
			"烟酒": "tobaccoAndWine",
			"医疗": "medical",
			"饮品": "beverage",
			"娱乐": "recreation",
			"住房":"housing",
			"转账": "transferAccounts",
			"追星": "starchaser",
			"租金": "rental"
		},
		modelShow:false,
		modelContent:'您确定要删除该账单吗？',
		id:null,
		name:''
	})
	onLoad((option)=>{
		state.id = parseInt(option.id);
		state.name = option.name;
		setInfo(JSON.parse(option.obj));
		getToken()
	})
	// 获取token令牌
	const getToken = ()=>{
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				state.token = res.data
			}
		})
	}
	// 返回上一页
	const back = () =>{
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
	// 记住账单值
	const setInfo = (obj)=>{
		// console.log(obj)
		state.accountInfo = obj
		let arr = [];
		arr.push(['金额',obj.money])
		arr.push(['时间',obj.time])
		arr.push(['账单名称',obj.billName])
		// arr.push(['账单用户',obj.])
		// console.log(state)
		if(obj.id != state.id){
			// console.log(obj.id,state.id)
			arr.push(['账单用户','绑定对象'])
		}else{
			arr.push(['账单用户',state.name])
		}
		state.showData = arr
	}
	// 判断返回图标路径
	const judgeIcon = (obj) => {
		let str = state.typeHash[obj.type]
		return `../../static/type/${str}.svg`
	}
	// 关闭模态框
	const closeModel = () =>{
		state.modelShow = false
	}
	// 确定删除按钮
	const deleteAdd = ()=>{
		uni.request({
			url:'http://124.221.162.230:8888/bill/deleteBill',
			method:'POST',
			header:{
				Authorization: state.token
			},
			data:{
				billId:state.accountInfo.billId
			},
			success: (res) => {
				state.modelShow = false
				if(res.data.code == 200){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
			}
		})
	}
	// 删除账单
	const deleteInfo = () =>{
		state.modelShow = true
		
	}
	// 编辑账单
	const changeInfo = () =>{
		let obj = JSON.stringify(state.accountInfo)
		uni.navigateTo({
			url:`/pages/addAccount/addAccount?info=${obj}&type=修改`
		})
	}
</script>

<style lang="less" scoped>
.out-box{
	width: 100vw;
	height: 100vh;
	padding-top: var(--status-bar-height);
	box-sizing: border-box;
	background: #F6FBFF;
	position: relative;
	overflow: hidden;
	.oblique-bar {
		position: absolute;
		top: 0;
		right: 100rpx;
		width: 100rpx;
		height: 700rpx;
		background: linear-gradient(to bottom, #ffffff, rgb(217, 242, 255));
		transform: translateY(-330rpx) rotateZ(-45deg);
	}
	
	.oblique-bar-two {
		position: absolute;
		top: 0;
		right: 40rpx;
		width: 100rpx;
		height: 700rpx;
		background: linear-gradient(to bottom, #F3F9FF, rgb(217, 242, 255));
		transform: rotateZ(-45deg);
	}
	.titleBar{
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.title{
			font-weight: 700;
		}
		.backBtn{
			position: absolute;
			left: 20rpx;
			top: -20rpx;
			width: 80rpx;
			height: 80rpx;
			background: #ffffff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0rpx 0rpx 2rpx 4rpx #f5f5f5;
			image{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.account-card{
		position: relative;
		z-index: 2;
		margin-top: 60rpx;
		width: 100%;
		height:calc(100vh - 260rpx);
		padding: 0rpx 40rpx 0rpx 40rpx;
		box-sizing: border-box;
		.card{
			width: 100%;
			height: 100%;
			background-color: aquamarine;
			border-radius: 30rpx;
			padding: 16rpx;
			box-sizing: border-box;
			.accountInfo{
				width: 100%;
				height: 100%;
				background-color: #ffffff;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				position: relative;
				.typeIcon{
					margin-top: 50rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					font-weight: 600;
					image{
						width: 120rpx;
						height: 120rpx;
					}
					text{
						margin-top: 10rpx;
					}
				}
				.account-detail{
					padding: 0rpx 30rpx 0rpx 30rpx;
					box-sizing: border-box;
					.detailItem{
						margin-top: 40rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.typeTitle{
							width: 160rpx;
							height: 66rpx;
							// background-color: lightgray;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 10rpx;
							// color: #ffffff;
							font-size: 30rpx
						}
						.pay{
							color: orangered;
						}
						.expense{
							color: limegreen;
						}
					}
					.remark{
						margin-top: 80rpx;
						width: 100%;
						height: 300rpx;
						background-color: #f8f8f8;
						border-radius: 10rpx;
						padding: 30rpx 20rpx 20rpx 20rpx;
						box-sizing: border-box;
						font-size: 26rpx
					}
				}
				.button{
					width: 100%;
					height: 140rpx;
					position: absolute;
					left: 0;
					bottom: -70rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					.delete{
						width: 260rpx;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: rgb(255,116,155);
						border-radius: 50rpx;
						color: #ffffff;
						font-weight: 600;
						border: 5rpx solid #ffffff;
					}
					.change{
						width: 260rpx;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: rgb(253,223,101);
						border-radius: 60rpx;
						font-weight: 600;
						border: 5rpx solid #ffffff;
					}
				}
			}
		}
	}
}
</style>
